<template>
 <div class="index">
    
        <div class="Carousel map">
            <!-- <img :src="dataList.sections[0].body.items[0]?.img_url" alt=""> -->
            <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
            <van-swipe-item v-for="c in dataList?.sections[0]?.body.items" :key="c.material_id"  >

                <img  style="width: 100%;" :src="c.img_url" alt="">
            </van-swipe-item>    
            </van-swipe>
        </div>  

         <indexItemContentUnder v-for="d in dataList?.sections.slice(1)" :key="d.block_id" :iList="d.body"
          ></indexItemContentUnder>
 
          <div @click="toUp" v-show="show"><img class="BcakTop" src="@/assets/images/bcakTop.png" alt=""></div>

        <!-- <transition :name="transitionName">  -->
            <!--<keep-alive>
                <router-view class="child-view"> </router-view>
            </keep-alive>  -->     
        <!-- </transition>  -->
  </div>
</template>

<script>
//一个用来封装主页样式的组件
import indexItemContentUnder from "./indexItemContentUnder.vue"
export default {
    props:["dataList"], //shift()
    
    data(){
        return{
            newDataList:[],
            show:false,
            transitionName: 'slide-left'
        }
    },
    methods:{
        //回到顶部
        toUp(){
        let top = document.documentElement.scrollTop || document.body.scrollTop
        const timeTop = setInterval(()=>{
            document.body.scrollTop = document.documentElement.scrollTop = top -=50
            if(top <=0) {
                clearInterval(timeTop)
            }
        })
    },
    scrollToTop() {
			let that = this;
			let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
			that.scrollTop = scrollTop;
			// console.log(scrollTop)
			//为了计算距离顶部的高度，当高度大于500显示回顶部图标，小于500则隐藏
			if (that.scrollTop > 500) {
				that.show = true;
			} else {
				that.show = false;
			}
		},
        // Todetail(a){
        // if(a !== undefined){
        //    this.$router.push({
        //     path:`/productdetails/${a}`,
        //   })
        // }
        // }

    },
    computed:{
    
    },
//     watch: {
//     $route(to, from) {
//         console.log(to,from)
//         if (to.params.index > from.params.index) {
//             console.log(123);
//             this.transitionName = "slide-left";
//         } else {
//             console.log(321);
//             this.transitionName = "slide-right";
//         }
//     }
// },
    mounted(){
        window.addEventListener("scroll", this.scrollToTop,true);
    },
    destroyed() {
		window.removeEventListener("scroll", this.scrollToTop,true);
	},
    components:{
        indexItemContentUnder,
    }
}
</script>

<style lang="scss" scoped>
.index{
    margin-bottom: 13vw;


}
.BcakTop{
      position: fixed;
      bottom: 17vw;
      right: 4vw;
      z-index: 11;
      width: 12%;
      height: auto;
    }
//     .child-view {
//     position: absolute;
//     width:100%;
//     transition: all .4s ;
// }
// .slide-left-enter, .slide-right-leave-active {
//     opacity: 0;
//     -webkit-transform: translate(100%, 0);
//     transform: translate(100%, 0);
// }
// .slide-left-leave-active, .slide-right-enter {
//     opacity: 0;
//     -webkit-transform: translate(-100%, 0);
//     transform: translate(-100%, 0);
// }

</style>